<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-20 10:08:14
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-05-20 10:24:20
 * @FilePath: \vue-admin-template\src\views\juanku\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-container direction="vertical" style="margin: 20px;">
    <el-header>
      <el-radio-group v-model="searchType" style="margin-right: 10px;">
        <el-radio label="name">试卷名称</el-radio>
        <el-radio label="number">试卷编号</el-radio>
        <el-radio label="creator">创建者</el-radio>
      </el-radio-group>
      <el-input
        v-model="searchContent"
        placeholder="请输入搜索内容"
        style="width: 200px; margin-right: 10px;"
      />
      <el-button type="primary" @click="searchPaper">搜索</el-button>
    </el-header>
    <el-main>
      <el-table :data="filteredPapers" stripe style="width: 100%">
        <el-table-column prop="number" label="试卷编号" />
        <el-table-column prop="name" label="试卷名称" />
        <el-table-column prop="creator" label="创建者" />
        <el-table-column prop="status" label="试卷状态" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button size="mini" @click="handleViewStats(scope.$index, scope.row)">查看统计数据</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      searchType: 'name',
      searchContent: '',
      papers: [
        // 这里应该是从后端获取的数据，这里只是模拟
        { number: '001', name: '数学试卷一', creator: '张老师', status: '已发布' },
        { number: '002', name: '语文试卷一', creator: '张老师', status: '未发布' },
        { number: '003', name: '英语试卷一', creator: '王老师', status: '已完成' },
        { number: '004', name: '语文试卷二', creator: '王老师', status: '已发布' },
        { number: '005', name: '数学试卷二', creator: '孙老师', status: '未发布' }
      ]
    }
  },
  computed: {
    filteredPapers() {
      if (this.searchContent) {
        // 如果搜索框有输入，则过滤试卷列表
        return this.papers.filter(paper => {
          if (this.searchType === 'name') {
            return paper.name.includes(this.searchContent)
          } else if (this.searchType === 'number') {
            return paper.number.includes(this.searchContent)
          } else if (this.searchType === 'creator') {
            return paper.creator.includes(this.searchContent)
          }
          return false
        })
      } else {
        // 否则显示全部试卷列表
        return this.papers
      }
    }
  },
  created() {
    // 初始化时随机显示3-5条试卷信息
    this.papers = this.papers.sort(() => Math.random() - 0.5).slice(0, Math.floor(Math.random() * 3) + 3)
  },
  methods: {
    searchPaper() {
      // 当用户点击搜索按钮时，调用计算属性 filteredPapers 来更新列表
    },
    handleEdit(index, row) {
      console.log('编辑试卷', index, row)
      // 这里可以添加编辑试卷的逻辑
    },
    handleDelete(index, row) {
      console.log('删除试卷', index, row)
      // 这里可以添加删除试卷的逻辑
    },
    handleViewStats(index, row) {
      console.log('查看统计数据', index, row)
      // 这里可以添加查看统计数据的逻辑
    }
  }
}
</script>

<style>
/* 在这里添加一些自定义样式 */
</style>
